<template>
  <div class="groupContainer">
      <div class='card-wrap'>
            <scroll-view  style="height:100%" :scroll-y="true">
               <div v-if='dataList.length>0'>
                  <div class='level1'>
                    <div class='label-line pl10' :class='{active:dataList[0].id==groupId}' @click.stop='selecteGroup(dataList[0].id,dataList[0].text||dataList[0].name)'>
                      <div class='title'>
                        {{state==2? dataList[0].name : dataList[0].text}}
                        <i-icon type="success" size='20' color='#4192c1' v-if='state!=1&&groupId==dataList[0].id' />
                      </div>
                      <div class='btn-sm-wrap'>
                        <button class='btn-default sm green' @click.stop='back(dataList[0].pid)' v-if='dataList[0].id!=groupList[0].id'>返回上一级</button>
                      </div>
                    </div>
                    <radio-group v-if='personList.length>0'>
                            <div class='label-line label-title'>
                              人员：
                            </div>
                            <label v-for="(item,index) in personList" :key="index">
                                <div class="i-index-demo-item" @click='selectPerson(item,index)'>
                                    <div class='name' v-if='state==0' :class='{active:personId==item.id}'>{{item.name}}</div>
                                    <div class='name' v-if='state==1' :class='{active:item.selected}'>{{item.name}}</div>
                                    <div class='name' v-if='state==2' :class='{active:item.selected}'>{{item.name}}</div>
                                    <div class='status-wrap'>
                                      <div class='circle' :class='{gray:item.attendanceStatus==1,green:item.acceptedCount==0,orange:item.acceptedCount>0 && item.acceptedCount<4,red:item.acceptedCount>3}'></div>
                                      <div v-if='item.attendanceStatus==1'>未签到</div>
                                      <div v-else class='status'>
                                        <div v-if='item.acceptedCount==0'>空闲</div>
                                        <div v-else-if='item.acceptedCount>0 && item.acceptedCount<4'>较忙</div>
                                        <div v-else-if='item.acceptedCount>3'>繁忙</div>
                                        <div class='num'>{{item.acceptedCount}}</div>
                                      </div>
                                    </div>
                                    <div class='radio-wrap'  v-if='state==0||state==2'>
                                      <image src='/static/images/icon_confirm@3x.png' v-if='personId==item.id'/>
                                      <input type="checkbox" name="list" :value="item.id" :checked="personId==item.id" :disabled="state==0&&groupId!=dataList[0].id" class='radio'>
                                    </div>
                                    <div class='radio-wrap'  v-if='state==1'>
                                      <image src='/static/images/icon_confirm@3x.png' v-if='item.selected'/>
                                      <input type="radio" name="list" :value="item.id" :checked="item.selected" class='radio' :disabled="state==0&&groupId!=dataList[0].id">
                                    </div>
                                </div>
                            </label>
                      </radio-group>
                     <div v-if='dataList.length>0 && level1Id==dataList[0].id && state!=3'>
                      <div class='label-line label-title'>
                        下级：
                      </div>
                      <div class='level2' v-for='(subnode,index2) in dataList[0].nodes' :key='subnode.id+index2'>
                        <div class='label-line' :class='{active:groupId==subnode.id}' @click.stop='selecteGroup(subnode.id,subnode.text||subnode.name)'>
                          <div>{{state==2?subnode.name :subnode.text}}<i-icon type="success" size='20' color='#4192c1' v-if='groupId==subnode.id' /></div>
                          <div v-if='subnode.nodes && subnode.nodes.length>0'>
                            <!-- <i-icon type="unfold" size='20' color='#d9dde0' v-if='level2Id==subnode.id' /> -->
                            <div class='img'><img src='/static/images/organization@2x.png' @click.stop='changeLevel2(subnode)'/></div>
                            <!-- <i-icon type="enter"  size='20' color='#d9dde0' v-else @click.stop='changeLevel2(subnode)'/> -->
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
              
            </scroll-view>
          </div>
          <div class='btn-line'>
              <mp-badge :dot=false :info=personSelectedList.length badgePos="right-top" i-class='badge-wrap'>
                <image src='/static/images/treePeople.png' class="badge-img" />
              </mp-badge>
              <button class='btn-default red' @click='reset'>重置</button>
              <button class='btn-default' @click='sure'>确定</button>
          </div>
          <i-toast id="toast" />
  </div>
</template>

<script type="text/javascript">
import { mapState } from 'vuex';
import mpBadge from 'mpvue-weui/src/badge';
import { $Toast } from '@/../static/iview/base/index';
export default {
  beforeMount(){
    var params = this.$root.$mp.query;
    if(params.projectId) this.projectId = params.projectId;
    if(params.state) this.state = params.state;
    if(params.groupId) this.groupId = params.groupId;
    this.dataList = [];
    this.queryGroup()
  },  
  components: {
    mpBadge,
  },
  data() {
    return {
      projectId:'',
      dataList:[],
      groupList:[],
      level1Id:null,
      level2Id:null,
      groupId:null,
      groupName:'',
      personList:[],
      personSelectedList:[],
      scrollTop:0,
      list: [],
      personId:null,
      userList:[],
      personName:'',
      state:1//0单选1多选
    }
  },
  computed:{
    ...mapState(['userInfo'])
  },
  methods:{
    queryGroup(){
      var url,data = {
          ukey:this.userInfo.ukey
      };
      url = '/user/getGroupsByUser';
      data.projectId = this.projectId
      this.$http.post({
        url,
        data
      }).then(res=>{
        if(res.s==0){
          this.dataList = res.i.Data || [];
          this.groupList = res.i.Data;
          if(this.dataList.length>0){
            this.level1Id = this.dataList[0].id;
          }
        }
      }).then(res=>{
          this.findPerson(this.level1Id);
      }).catch(e=>{
        console.log('获取失败',e)
      })
    },
    changeLevel2(node){
      this.level2Id = node.id;
      this.dataList = [node];
      this.level1Id = this.dataList[0].id;
      this.findPerson(this.level1Id);
    },
    findNode(id){
      var node = null;
      function f(items) {
        items.forEach(item => {
          if(item.id==id){
            node = item
          }else{
            if(item.nodes && item.nodes.length>0) f(item.nodes)
          }
        })
      }
      f(this.groupList)
      return node;
    },
    back(id){
      var node = this.findNode(id);
      if(node) this.dataList = [node];
      this.level1Id = this.dataList[0].id;
      this.level2Id = null;
      this.findPerson(this.level1Id);
    },
    reset(){
      this.groupId = null;
      this.dataList = this.groupList;
      this.level1Id = this.dataList.length>0 ? this.dataList[0].id : '';
      this.level2Id = null;
      this.userList = [];
      this.personName = '';
      this.groupName = '';
      this.personId = null;
      this.personSelectedList = [];
      this.personList.map(item=>item.selected = false);
    },
    sure(){
      if(this.state==2 && this.personId==null){
        $Toast({
            content:'接单人不能为空'
        });
        return;
      }
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2]; 
      var param = {};
      if(this.state==1){
        param = {  
          userList:JSON.stringify(this.userList),
          personName:this.personName
        }
      }else{
        param = {  
          groupId:this.groupId,
          groupName:this.groupName,
          personId:this.personId,
          personName:this.personName
        };
      }
      prevPage.setData(param) 
      wx.navigateBack({delta:1})
      this.level1Id = this.dataList[0].id;
      this.level2Id = null;
    },
    findPerson(id){
      this.personList = [];
      this.$http.post({
        url:'/user/getUsersWithStatus',
        data:{
          groupId:id ? id : this.groupId,
          projectId:this.projectId,
          ukey:this.userInfo.ukey
        }
      }).then(res=>{
        if(res.s==0){
          res.i.Data.map(item=>{
            item.selected = this.personSelectedList.indexOf(item.id)>-1 ? true :false;
            this.personList.push(item)
          })
        }
      }).catch(e=>{
        console.log('获取失败',e)
      })
    },
    selecteGroup(id,name){
      if(this.state==0){
        this.groupId = id;
        this.groupName = name;
        this.personId = null;
        this.personName = '';
      }
    },
    selectPerson(item,i){
      if(this.state==1){
        var index = this.personSelectedList.indexOf(item.id);
        if(index<0){
          this.personSelectedList.push(item.id)
          this.userList.push({
            groupId:this.dataList[0].id,
            userId:item.id
          })
          this.personName+=`${this.dataList[0].text}/${item.name} `;
          this.$set(this.personList[i],'selected' ,true)
        }else{
          if(this.personName!=''){
            var nameList = this.personName.split(' ');
            nameList.splice(index,1);
            this.personName = nameList.join(' ')
          }
          this.personSelectedList.splice(index,1)
          this.userList.splice(index,1)
          this.$set(this.personList[i],'selected' ,false)
        }
      }else{
        let text = this.state==2 ?this.dataList[0].name :this.dataList[0].text;
        this.selecteGroup(this.dataList[0].id,text)
        this.personId = item.id;
        this.personName = item.name;
      }
    }
  }
}
</script>

<style lang='less'>
page{
    background:#eef7fd;
    height:100%;
}
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}
.groupContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    .card-wrap{
      flex:1;
      height: 50rpx;
      border: 1px solid #e8eae9;
      border-radius: 8rpx;
      margin: 30rpx;
      margin-bottom:0; 
      background: #fff;
      .person-wrap{
        height: 200rpx;
      }
      .radio-wrap{
        width: 60rpx;
        height: 60rpx;
        position: relative;
        image{
          position: absolute;
          left: 12rpx;
          top: 16rpx;
          width: 36rpx;
          height: 36rpx;
          z-index: 1;
        }
        .radio{
          position:absolute;
          left: 0;
          top: 0;
          z-index: 2;
          opacity: 0;
        }
      }
      .label-line{
        display: flex;
        justify-content: space-between;
        color:#b1b1b1;
        border-bottom: 1px solid #dfe3e5;
        padding:0 20rpx 0 30rpx;
        height: 70rpx;
        align-items: center;
        .pl10{
          padding-left:16rpx 
        }
        &.label-title{
          color:#33cc00;
          background: #f7fbfe;
        }
        .title{
          font-size:32rpx;
          color: #000;
        }
        .img,.img img{
          width: 40rpx;
          height: 40rpx;
        }
        &.active{
          color: #4192c1;
        }
        &.pl0{
          padding-left: 0;
        }
      }
      .level1{
        font-size: 30rpx;
        .level2{
          font-size:28rpx;
          background: #f7fbfe;
        }
      }
    }
    .btn-sm-wrap{
      width: 166rpx;
      margin-right:20rpx; 
    }
    .btn-line{
        display: flex;
        justify-content: center;
        padding: 20rpx;
        .badge-img{
          width: 80rpx;
          height: 80rpx;
        }
    }
    .btn-default{
        flex:1;
        margin: 0 20rpx;
        background: #1380d3;
        color:#fff!important;
        font-size:36rpx;
        border-radius:40rpx; 
        height: 80rpx;
        line-height: 80rpx;
        max-width: 50%;
        padding: 0;
        &.sm{
          height: 40rpx;
          line-height: 40rpx;
          max-width: 100%;
          width: 100%;
          font-size: 28rpx;
        }
        &.red{
            background: #ff554d
        }
        &.green{
          background: #50ae18
        }
    }
    .view{
        width: 100%;
        position: absolute;
        top:680rpx;
        bottom: 0;
        z-index: 1000;
    }
    .i-index-demo-item{
        height:70rpx;
        padding:0 20rpx 0 30rpx;
        color: #b1b1b1;
        border-bottom: 2rpx solid #dfe3e5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f7fbfe;
        .name{
          width: 40%;
          &.active{
            color: #4192c1;
          }
        }
        .icon{
          width: 40rpx
        }
        .status-wrap{
          display: flex;
          align-items: center;
          width: 200rpx;
          .status{
            display: flex;
            .num{
              margin-left:20rpx; 
            }
          }
          .circle{
            width: 24rpx;
            height: 24rpx;
            border-radius:12rpx; 
            margin:0 10rpx; 
            &.orange{
              background: #ff9900
            }
            &.green{
              background: #33cc00
            }
            &.gray{
              background: #999999
            }
            &.red{
              background: #ff0000
            }
          }
        }
    }
}
</style>
